<template>
    <div class="containers">
        <div class="title">
            热门歌手
        </div>
        <Scroll @changeList="changeList" class="scroll" :data="list">
            <div>
                <ul>
                    <li @click="clickList(index)" v-for ="(item,index) of list" :key="index">
                        <img v-lazy="item.picUrl" alt="">
                        <p class="text">{{item.name}}</p>
                    </li>
                </ul>
            </div>
        </Scroll>
    </div>
</template>

<script>
import { hotSinger } from '../../../../api/hotSinger'
import Scroll from '../../../../base/scroll'
export default ({
    name: 'SingerList',
    mounted() {
        this.findSinger()
    },
    data() {
        return {
            list: []
        }
    },
    methods: {
        // 查询歌手信息
        findSinger() {
            hotSinger('1001').then(res => {
                let { data: { artists } } = res
                this.list = artists
            })
        },
        // 下拉加载更多
        changeList() {
        },
        // 点击跳转到播放页面
        clickList(index) {
            let id = this.list[index].id
            this.$router.push(`/singerList/${id}`)
        }
    },
    components: {
        Scroll
    }
})
</script>

<style lang="scss" scoped>
@import './src/common/scss/mixin.scss';
.containers {
    margin-top: 10px;
    height: 1379px !important;
    .title {
            width: 100%;
            height: 70px;
            line-height: 70px;
            background: #d43c33;
            color: #fff;
            font-size: 35px;
            padding-left: 35px;
        }
    .scroll {
        overflow: hidden;
        width: 110%;
        height: 100%;
        ul {
            @include display-c;
            overflow: hidden;
            li {
                display: flex;
                height: 200px;
                padding-left: 50px;
                box-sizing: border-box;
                align-items: center;
                // border-bottom: 2px solid #eee;
                img {
                    width: 130px;
                    height: 130px;
                    border-radius: 50%;
                }
                .text {
                    font-size: 40px;
                    margin-left: 20px;
                }
            }
        }
    }
}
</style>